<template>
  <div class="container">
    <el-dialog v-model="state.dialog.isShowDialog" :title="state.dialog.titleObj[state.dialog.type]"
      label-position="top" width="600px">
      <el-form ref="dialogFormRef" :model="state.ruleForm" :rules="state.ruleRules" label-width="auto">
        <el-form-item label="选择订单:" prop="original_order_id">
          <el-select v-model="state.ruleForm.original_order_id" style="width: 100%" placeholder="请选择" clearable
            filterable :disabled="isDisabledFn">
            <el-option v-for="item in state.accountTypeArr" :key="item.orderid" :label="item.order_no"
              :value="item.orderid" />
          </el-select>
        </el-form-item>
        <el-form-item label="选择类型:" prop="service_id">
          <el-select v-model="state.ruleForm.service_id" style="width: 100%" placeholder="请选择" clearable filterable
            :disabled="isDisabledFn">
            <el-option v-for="item in state.accountStatusArr" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="支付金额:" prop="supplement_amount">
          <el-input v-model="state.ruleForm.supplement_amount" placeholder="请输入" clearable :disabled="isDisabledFn" />
        </el-form-item>
        <el-form-item label="补费详情:" prop="reason">
          <el-input v-model="state.ruleForm.reason" placeholder="请输入" type="textarea" clearable
            :disabled="isDisabledFn" />
        </el-form-item>
      </el-form>
      <template v-if="!isDisabledFn" #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" size="default" @click="onSubmit">保 存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="addMsg">
import { reactive, onMounted, computed } from 'vue';
import { getorderlist, gettypelist, supplementfee, suppFeeUpdate } from '/@/api/startfab/index';

const emit = defineEmits(['updateList', 'updateItem']);
const state = reactive({
  accountTypeArr: [],
  accountStatusArr: [],
  ruleForm: {
    supplement_amount: '',
    original_order_id: '',
    service_id: ''
  },
  ruleRules: {},
  dialog: {
    isShowDialog: false,
    row: null,
    type: '',
    titleObj: {
      'view': '查看',
      'edit': '编辑',
      'add': '新增'
    },
    isDisabled: false
  },
  loading: false
})
const onSubmit = () => {
  const params = {
    ...state.ruleForm
  }
  if (state.dialog.type === 'add') {
    supplementfee(params).then((res) => {
      if (res.code === 10000) {
        onCancel()
        emit('updateList')
      }
    })
  } else {
    suppFeeUpdate(params).then((res) => {
      if (res.code === 10000) {
        const updateData = {
          ...state.dialog.row,
          ...state.ruleForm,
        };
        emit('updateItem', updateData);
        onCancel()
        // emit('updateList')
      }
    })
  }
}
const getorderlistFn = async () => {
  const resData = await getorderlist()
  if (resData.code === 10000) {
    state.accountTypeArr = resData.data.list
  } else {
    state.accountTypeArr = []
  }
}
const gettypelistFn = async () => {
  const resData = await gettypelist()
  if (resData.code === 10000) {
    state.accountStatusArr = resData.data
    console.log('6^^', state.accountStatusArr)
  } else {
    state.accountStatusArr = []
  }
}
const openDialog = async (type, row) => {
  state.dialog.row = row
  state.dialog.type = type
  await getorderlistFn()
  await gettypelistFn()
  setTimeout(() => {
    if (row) {
      state.ruleForm = {
        ...state.ruleForm,
        ...row
      }
    } else {
      state.ruleForm = {
        reason: '',
        supplement_amount: '',
        original_order_id: '',
        service_id: ''
      }
    }
    state.dialog.isShowDialog = true;
  }, 200)
};
const closeDialog = () => {
  state.ruleForm = {
    reason: '',
    supplement_amount: '',
    original_order_id: '',
    service_id: ''
  }
};
const onCancel = () => {
  closeDialog();
  state.dialog.isShowDialog = false;
};
onMounted(() => { })
const isDisabledFn = computed(() => {
  return state.dialog.type === 'view'
})
defineExpose({
  openDialog,
})
</script>
<style scoped lang="scss">
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep(.el-form-item__content) {
  display: block;
}
</style>
